<template>
  <div class="tw-libimagepoppane" :class="{[`x${_uid}`]:true, xzindex:animate}">
  <el-popover style="background-color:transparent"
    ref="poppane"
    :popper-class="`xpop${_uid} `"
    transition="poppers"
    :placement="placement"
    :popper-options="popperOptions"
    v-model="popvalue"
    @show="animate=false"
    @hide="animate=true"
    :trigger="trigger">
     <div :style="{width:divWidth,height:divHeight, margin: '50px', position: 'fixed'}">
      <slot>
        <!-- <transition name="pics" mode="out-in">
          <el-table  class="tw-pppp" :data="gridData" >
            <el-table-column width="150" property="date" label="日期"></el-table-column>
            <el-table-column width="100" property="name" label="姓名"></el-table-column>
            <el-table-column width="300" property="address" label="地址"></el-table-column>
          </el-table>
        </transition> -->
      </slot>
    </div>
    <transition name="pics" mode="out-in">
      <div class="tw-absult-pic" v-show="!animate" style="top: 0;left: 0">
        <div class="tw-pic-image" :style="{'z-index':zIndex}">
          <img class="xbkg" v-if="icons.length > 0 && icons[0].localPath !== ''" :src="`${$twApp.fileBaseUrl}${icons[0].localPath}`">
          <img class="xbkg" v-else src="@assets/ico-bg.png">
          <img class="xouter" style="z-index:2;" v-if="icons.length > 1 && icons[1].localPath !== ''" :src="`${$twApp.fileBaseUrl}${icons[1].localPath}`">
          <img class="xouter" style="z-index:2;" v-else src="@assets/pic-outer.png">
          <img class="xinner" style="z-index:4;" v-if="icons.length > 2 && icons[2].localPath !== ''" :src="`${$twApp.fileBaseUrl}${icons[2].localPath}`">
          <img class="xinner" style="z-index:4;" v-else src="@assets/pic-inner.png">
          <img class="xbase" style="z-index:6;"  v-if="icons.length > 3 && icons[3].localPath !== ''" :src="`${$twApp.fileBaseUrl}${icons[3].localPath}`">
          <img class="xbase" style="z-index:6;"  v-else src="@assets/xmoney.png">
        </div>
      </div>
    </transition>
    <template slot="reference">
      <div>
        <div class="tw-absult-pic" :class="{xanimate: animate}" v-show="animate">
          <div class="tw-pic-image">
            <img class="xbkg" v-if="icons1.length > 0 && icons1[0].localPath !== ''" :src="`${$twApp.fileBaseUrl}${icons1[0].localPath}`">
            <img class="xbkg" v-else src="@assets/ico-bg.png">
            <img class="xpad" style="z-index:2" v-if="icons1.length > 1 && icons1[1].localPath !== ''" :src="`${$twApp.fileBaseUrl}${icons1[1].localPath}`">
            <img class="xpad" style="z-index:2" v-else src="@assets/xmoney.png">
          </div>
          <div class="tw-pic-border">
            <div class="xborder"></div>
          </div>
        </div>
      </div>
    </template>
  </el-popover>
</div>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'

export default {
  name: 'lib-imgpoppane',

  mixins: [style],

  props,

  computed: {
    style () {
      return {
        iconWidth: this.iconWidth,
        iconHeight: this.iconHeight,
        borderHeight: this.borderHeight
      }
    }
  },

  data () {
    return {
      animate: true,
      popvalue: false,
      timer: null,
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  },
  mounted () {
    if (this.autoOpen) {
      setTimeout(() => {
        this.$nextTick(() => {
          if (parseInt(this.curIndex) === 1) {
            this.open()
          }
        })
      }, 10000)
    }
  },
  watch: {
    popperOptions () {
      return {

      }
    },
    value () {
      if (this.autoOpen) {
        if (parseInt(this.value) === parseInt(this.curIndex)) {
          this.open()
        } else {
          this.close()
        }
      }
    }
  },

  methods: {
    open () {
      console.log('curIndex', this.curIndex)
      let vm = this
      vm.popvalue = true
      vm.animate = false
      setTimeout(() => {
        vm.close()
        let index = parseInt(vm.curIndex) + 1
        if (index > parseInt(vm.totalIndex)) {
          index = 1
        }
        vm.$emit('input', index)
        vm.$emit('change', index)
      }, parseInt(vm.openTimer))
    },
    close () {
      this.popvalue = false
      this.animate = true
    },
    setStyle () {
      let style = `
        ::root.tw-libimagepoppane.xzindex {
          z-index: 2
        },
        ::root .tw-pic-image {
          width: ${this.iconWidth};
          height: ${this.iconHeight};
        }
        ::root .tw-pic-image > img {
          max-width: ${this.iconWidth};
          max-height: ${this.iconHeight};
        }
        :root .tw-pic-border {
          width: ${this.iconWidth};
          height: ${this.borderHeight};
        }

        .el-popover.xpop${this._uid} {
          margin-top:20px;
          background: transparent;
          border: none;
          box-shadow: none;
          border: none;
        }
        .el-popover.xpop${this._uid} .popper__arrow {
          visibility: hidden;
        }
      `

      this.addStyle(style)
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
